<template>
  <div class='map-box'>
    <div id="map"></div>
    <p class="result">找到了{{listData.length}}个结果</p>
    <!-- <div id="r-result"></div> -->
    <ul class="result-box">
      <li v-for="(item,index) in listData" @click="showPlace(item)">
        
        <span class="btn fr btn-active" @click.stop="gotoHere(item)">去这里</span>

        <p class="title">{{index+1}}、{{item.title}}</p>

        <p class="content">{{item.address}}</p>

      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props:["type"],
  components: {},
  name: "",
  data() {
    return {
      imgs:{
        position:require('../../../assets/img/more/help/3.png')
      },
      info:{
        
      },
      map:null,
      mPoint:null,//{lng:"",lat:""}

      listData:[
        {
          title:"家乐福停车场",
          address:"湖北省武汉市汉阳区钟家村闽东商务大厦（新世界百货区西）",
        }
      ]
    };
  },
  computed:{
    
  },
  watch:{
    type(){
      this.getResult()
    }
  },
  methods: {
    getResult(){
      var that=this
      this.map.clearOverlays()
      var array=["加油站","停车场","充电桩"]
      var options={
        renderOptions: {map: this.map,},
        onSearchComplete(results){
          // 判断状态是否正确
          if (local.getStatus() == BMAP_STATUS_SUCCESS){
            var goal=[]
            for (var i = 0; i < results.getCurrentNumPois(); i ++){
              goal.push(results.getPoi(i))
            }
            that.$set(that,"listData",goal)
          }
        }
      }
      var local =  new BMap.LocalSearch(this.map, options);  
      local.setPageCapacity(50)//每页返回的数据条数 
      local.searchNearby(array[this.type],this.mPoint,5000);
    },
    showPlace(item){
      this.map.closeInfoWindow()
      var opts = {
        width : 150,     // 信息窗口宽度
        height: 50,     // 信息窗口高度
        title :'<p style="width:210px;font:bold 14px/16px arial,sans-serif;margin:0;color:#cc5522;white-space:nowrap;overflow:hidden">'+item.title+'</p>' , // 信息窗口标题
        enableMessage:true,//设置允许信息窗发送短息
        message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
      }
      var infoWindow = new BMap.InfoWindow('<div style="font:12px arial,sans-serif;margin-top:10px"><table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,sans-serif"><tbody><tr><td style="vertical-align:top;width:38px;white-space:nowrap;word-break:keep-all">地址： </td><td style="line-height:16px">'+item.address+'</td></tr></tbody></table></div>', opts);  // 创建信息窗口对象 
      this.map.openInfoWindow(infoWindow,item.point); //开启信息窗口
    },

    gotoHere(item){
      var opts={
        renderOptions: {map: this.map,},
        onSearchComplete(results){
          // console.log("done",results)
        }
      }
      var route=new BMap.DrivingRoute(this.map,opts)
      route.search(this.mPoint,item.point)

      // 高德
      // var from=this.mPoint.lng+","+this.mPoint.lat+",当前位置"
      // var to=item.point.lng+","+item.point.lat+","+item.title

      // 百度
      var baiduRoute =`?origin=latlng:${this.mPoint.lat},${this.mPoint.lng}|name:当前位置&destination=${item.title}&mode=driving&region=${item.city}&output=html`  


      var callnative=1
      // http://api.map.baidu.com/direction?origin=latlng:34.264642646862,108.95108518068|name:我家&destination=大雁塔&mode=driving&region=西安&output=html
      // location.href="https://uri.amap.com/navigation?from="+from+"&to="+to //高德 有坐标偏移
      location.href="http://api.map.baidu.com/direction"+baiduRoute //百度
    }
  },
  created() {
    
  },
  mounted(){
    this.$nextTick(()=>{
      var map = new BMap.Map("map");    // 创建Map实例
      var that=this
      // 定位
      var myPoint={
        x:"114.326121",
        y:"30.64374",
      }

      var getL=new BMap.Geolocation()
      
      getL.getCurrentPosition(function(r){
        if(r){
          myPoint.x=r.point.lng
          myPoint.y=r.point.lat
        }
        // alert('您的位置：'+r.point.lng+','+r.point.lat);
        var mPoint = new BMap.Point(myPoint.x,myPoint.y);  

        that.mPoint=mPoint

        map.centerAndZoom(mPoint, 13);  // 初始化地图,设置中心点坐标和地图级别

        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));

        map.enableScrollWheelZoom(true);
        map.enableContinuousZoom(true)
        map.enablePinchToZoom(true)

        that.map=map

        that.$nextTick(()=>{
          that.getResult()
        })

      },{enableHighAccuracy:true})

    })
  }
};
</script>
<style lang="scss" scoped>
.map-box {
  // margin: 15px;
  margin-bottom: 0;

  #map{
    height: 150px;
    box-sizing: border-box;
    border: 1px solid #cdcdcd;
  }

  .result{
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background-color: #F39519;
  }

  .result-box{

    li{
      margin: 0 15px;
      padding: 15px 0;
      border-bottom: 1px solid #f2f2f2;
    }

    .title{
      font-size: 14px;
      margin-right: 80px;
    }
    .content{
      font-size: 12px;
      color: #999;
      margin-right: 80px;
    }
    .btn{
      width: 60px;
      font-size: 14px;
      height: 30px;
      margin-right: 10px;
      background: linear-gradient(left bottom,#FF6613,#FFA200);
      background: -webkit-gradient(linear, left bottom, right top, from(#FF6613), to(#FFA200));
      line-height: 30px;
      text-align: center;
      color: #fff;
      border-radius: 4px;
      transform: translateY(5px)
    }
  }
}
</style>